<template>
    <div class="container">
        <a-breadcrumb>
            <a-breadcrumb-item>
                <icon-home />
            </a-breadcrumb-item>
            <a-breadcrumb-item>设置</a-breadcrumb-item>
            <a-breadcrumb-item>知识树管理</a-breadcrumb-item>
        </a-breadcrumb>
        <a-card title="知识树管理">
            <a-row>
                <a-col :flex="1">
                    <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="left">
                        <a-row :gutter="16">
                            <!-- <a-col :span="8">
                                <a-form-item label="知识点编号">
                                    <a-input v-model="formModel.pointId" />
                                </a-form-item>
                            </a-col> -->
                            <a-col :span="8">
                                <a-form-item label="知识点名称">
                                    <a-input v-model="formModel.pointName" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
                <a-divider style="height: 32px" direction="vertical" />
                <a-col :flex="'86px'" style="text-align: right">
                    <a-space direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon><icon-search /></template>搜索
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>

            <a-divider style="margin-top: 0" />

        </a-card>

        <a-card>
            <EChartsComponent @knowledge-click-event="handleKnowledgePointClick" ref="childECharts" />
        </a-card>

        <a-drawer :width="450" :visible="visible" @ok="handleKnowledgeOk" @cancel="handleKnowledgeCancel"
            unmountOnClose>
            <template #title>
                <a-dropdown @select="handleSelectOperation">
                    <a-button>其他操作 <icon-down /></a-button>
                    <template #content>
                        <a-doption>新建子知识点</a-doption>
                        <a-doption>移动知识点</a-doption>
                        <a-doption>删除知识点</a-doption>
                    </template>
                </a-dropdown>&nbsp;&nbsp;&nbsp;
                Knowledge: #{{ knowledgeNode.pointId }} | {{ knowledgeNode.pointName }}
            </template>
            <div>
                <a-card>
                    <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="right" :disabled="modalType == 1">
                        <a-form-item label="中文名称" required>
                            <a-input v-model="currRecord.pointName" />
                        </a-form-item>
                        <a-form-item label="英文名称" required>
                            <a-input v-model="currRecord.englishName" />
                        </a-form-item>
                        <a-form-item label="难度">
                            <a-input-number mode="button" v-model="currRecord.difficulty" :default-value="0" :min="0"
                                :max="100" :precision="0" />
                        </a-form-item>
                        <a-form-item label="重要程度">
                            <a-input-number mode="button" v-model="currRecord.importance" :default-value="0" :min="0"
                                :max="100" :precision="0" />
                        </a-form-item>
                        <a-form-item label="熟练程度">
                            <a-input-number mode="button" v-model="currRecord.proficiency" :default-value="0" :min="0"
                                :max="100" :precision="0" />
                        </a-form-item>
                        <a-form-item label="测试次数">
                            <a-input-number mode="button" v-model="currRecord.testCount" :default-value="0" :min="0"
                                :max="100" :precision="0" />
                        </a-form-item>
                        <a-form-item label="通过阈值">
                            <a-input-number mode="button" v-model="currRecord.passThreshold" :default-value="0" :min="0"
                                :max="100" :precision="0" />
                        </a-form-item>
                        <a-form-item label="置信因子">
                            <a-input-number mode="button" v-model="currRecord.confidenceFactor" :default-value="0"
                                :min="0" :max="100" :precision="0" />
                        </a-form-item>
                        <a-form-item label="备注">
                            <a-textarea v-model="currRecord.remark" />
                        </a-form-item>
                        <a-form-item label="是否可用">
                            <a-switch v-model="currRecord.enabled" />
                        </a-form-item>
                    </a-form>
                </a-card>

                <a-card>
                    <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="right" v-if="showParent">

                        <a-form-item label="父级编号">
                            <a-input-number mode="button" v-model="currRecord.movePointId" :default-value="0" :min="0"
                                :precision="0" />
                        </a-form-item>
                    </a-form>
                </a-card>
            </div>
        </a-drawer>
    </div>
</template>

<script lang="ts" setup>

import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { formatTime, getPostData } from '@/utils';
import useLoading from '@/hooks/loading';
import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface';

import { getList } from '@/api/lms/subjects';
import { getKnowledge } from '@/api/problems/knowledges';
import { formModel, pagination, columns } from './const';
import { modalType, currRecord, btnSaveKnowledge, btnCreateKnowledge, btnMoveKnowledge, btnDeleteKnowledge } from './event';
import { getOptions } from '@/api/base';
import EChartsComponent from './EChartsComponent.vue';
import { Split, Message, Modal } from '@arco-design/web-vue';

const scrollbar = ref(true);
const scroll = {
    x: 2000,
    y: 200
};
const scrollPercent = {
    x: '100%',
    y: '100%'
};

const router = useRouter();
const { loading, setLoading } = useLoading(true);
const visible = ref(false);
const showParent = ref(false);
const childECharts = ref(null);
// 编辑模式 0-修改节点，1-新增子节点，2-移动节点, 3-删除节点
const editMode = ref(0);

const renderData = ref<TableData[]>();
let knowledgeNode = ref({} as any);

const search = () => {
    pagination.current = 1;
    console.log("childECharts ", childECharts.value)
    childECharts.value.focusByNameEvent(formModel.value.pointName);
    //fetchData();
};

const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
};

const fetchData = async () => {
};


const handleKnowledgePointClick = async (data: any) => {
    knowledgeNode.value = data;
    let knowledge = await getKnowledge(knowledgeNode.value.pointId);
    currRecord.value = knowledge;
    editMode.value = 0; 
    visible.value = true;
    showParent.value = false;
}

const handleSelectOperation = (value: string) => {
    if (value == '新建子知识点') {
        currRecord.value = {};
        currRecord.value.enabled = true;
        currRecord.value.importance = 0;
        currRecord.value.difficulty = 0;
        currRecord.value.proficiency = 0;
        currRecord.value.testCount = 0;
        currRecord.value.passThreshold = 0;
        currRecord.value.confidenceFactor = 0;
        currRecord.value.subjectId = knowledgeNode.value.subjectId;
        currRecord.value.pointLevel = knowledgeNode.value.pointLevel + 1;
        showParent.value = false;
        editMode.value = 1;
    }

    if (value == '移动知识点') {
        editMode.value = 2;
        showParent.value = true;
    }

    if (value == '删除知识点') {
        editMode.value = 3;
        showParent.value = false;

        Modal.confirm({
            title: '确认',
            content: `确定要删除知识点【${knowledgeNode.value.pointName}】吗？`,
            onOk: async function () {
                btnDeleteKnowledge(childECharts, knowledgeNode.value);
            }
        });
        visible.value = false;
    }
}

const handleKnowledgeOk = () => {
    if (editMode.value == 0) {
        btnSaveKnowledge();
    }

    if (editMode.value == 1) {
        currRecord.value.parentPointId = knowledgeNode.value.pointId;
        btnCreateKnowledge(childECharts, knowledgeNode.value);
    }

    if (editMode.value == 2) {
        if (currRecord.value.movePointId <= 0) {
            Message.warning('请设置移动目标上级知识点编号');
            return;
        }

        btnMoveKnowledge(childECharts, knowledgeNode.value);
    }

    visible.value = false;
};

const handleKnowledgeCancel = () => {
    visible.value = false;
    showParent.value = false;
    editMode.value = 0;
}

fetchData();
</script>